<template>
  <!-- 账号绑定 -->
  <div class="user-info">
    <div class="all_main">
      <dragdrop :width="0">
        <template slot="left">
          <div class="all_left">
            <div class="grid-content bg-purple">
              <div class="header_title">
                <span>部门列表</span>
              </div>
              <div class="department_tree">
                <el-tree
                  :data="deptTree"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  :highlight-current="true"
                  :indent="1"
                  :expand-on-click-node="false"
                  node-key="pkDepartmentId"
                  :default-expanded-keys="idArr"
                ></el-tree>
              </div>
            </div>
          </div>
        </template>
        <template slot="right">
          <div class="all_right">
            <div class="grid-content bg-purple">
              <div class="header_title">
                <span>人员列表</span>
              </div>
              <div class="header_select">
                <div class="username">
                  <div>姓名:</div>
                  <el-input placeholder="用户姓名" v-model="userName" clearable size="mini"></el-input>
                </div>
                <div class="usernumber">
                  <div>编号:</div>
                  <el-input placeholder="用户编号" v-model="userNumber" clearable size="mini"></el-input>
                </div>
                <div class="cardnumber">
                  <div>卡号:</div>
                  <el-input placeholder="卡号" v-model="cardNumber" clearable size="mini"></el-input>
                </div>
                <div class="searchbutton">
                  <!-- <div> -->
                  <el-button type="primary" @click="gotosearch()" size="mini">查询</el-button>
                  <el-button type="primary" @click="resetfilter()" size="mini">重置条件</el-button>
                  <el-popover placement="top" width="500" trigger="click">
                    <div>
                      <el-row>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.userName.label"
                          v-model="formThead.userName.checked"
                          @change="checkboxChanged()"
                          margin-right:10px
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.userNumber.label"
                          v-model="formThead.userNumber.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.cardNumber.label"
                          v-model="formThead.cardNumber.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.userSexStr.label"
                          v-model="formThead.userSexStr.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.departmentName.label"
                          v-model="formThead.departmentName.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.groupName.label"
                          v-model="formThead.groupName.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.roomName.label"
                          v-model="formThead.roomName.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.idCard.label"
                          v-model="formThead.idCard.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.birthday.label"
                          v-model="formThead.birthday.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.phoneNumber.label"
                          v-model="formThead.phoneNumber.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.contact.label"
                          v-model="formThead.contact.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.contactPhone.label"
                          v-model="formThead.contactPhone.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.homeAddress.label"
                          v-model="formThead.homeAddress.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.postCode.label"
                          v-model="formThead.postCode.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.email.label"
                          v-model="formThead.email.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.regTime.label"
                          v-model="formThead.regTime.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.limitPassword.label"
                          v-model="formThead.limitPassword.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                        <el-checkbox
                          style="width:10%"
                          :label="formThead.platformBalance.label"
                          v-model="formThead.platformBalance.checked"
                          @change="checkboxChanged()"
                        ></el-checkbox>
                      </el-row>
                    </div>
                    <el-button type="primary" slot="reference" size="mini">自定义显示列</el-button>
                  </el-popover>
                </div>
              </div>
              <el-row class="table" type="flex" :gutter="20">
                <el-col :span="11">
                  <div class="lefttableone">
                    <el-row :gutter="20">
                      <el-col :span="24" class="lefttableonecol">
                        <div class="tabletitle">学生信息</div>
                        <el-table
                          :data="tableData"
                          border
                          row-key="id"
                          :header-cell-style="headFirst"
                          highlight-current-row
                          @row-click="rowClick"
                        >
                          <el-table-column
                            :label="formThead.userName.label"
                            :prop="formThead.userName.prop"
                            v-if="formThead.userName.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.userNumber.label"
                            :prop="formThead.userNumber.prop"
                            v-if="formThead.userNumber.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.cardNumber.label"
                            :prop="formThead.cardNumber.prop"
                            v-if="formThead.cardNumber.checked"
                            min-width="120px"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.departmentName.label"
                            :prop="formThead.departmentName.prop"
                            v-if="formThead.departmentName.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.groupName.label"
                            :prop="formThead.groupName.prop"
                            v-if="formThead.groupName.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.roomName.label"
                            :prop="formThead.roomName.prop"
                            v-if="formThead.roomName.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.userSexStr.label"
                            :prop="formThead.userSexStr.prop"
                            v-if="formThead.userSexStr.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.birthday.label"
                            :prop="formThead.birthday.prop"
                            v-if="formThead.birthday.checked"
                            min-width="94px"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.idCard.label"
                            :prop="formThead.idCard.prop"
                            v-if="formThead.idCard.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.loginName.label"
                            :prop="formThead.loginName.prop"
                            v-if="formThead.loginName.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.phoneNumber.label"
                            :prop="formThead.phoneNumber.prop"
                            v-if="formThead.phoneNumber.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.contact.label"
                            :prop="formThead.contact.prop"
                            v-if="formThead.contact.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.contactPhone.label"
                            :prop="formThead.contactPhone.prop"
                            v-if="formThead.contactPhone.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.homeAddress.label"
                            :prop="formThead.homeAddress.prop"
                            v-if="formThead.homeAddress.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.postCode.label"
                            :prop="formThead.postCode.prop"
                            v-if="formThead.postCode.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.email.label"
                            :prop="formThead.email.prop"
                            v-if="formThead.email.checked"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.regTime.label"
                            :prop="formThead.regTime.prop"
                            v-if="formThead.regTime.checked"
                            min-width="154px"
                          ></el-table-column>
                          <el-table-column
                            :label="formThead.limitPassword.label"
                            :prop="formThead.limitPassword.prop"
                            v-if="formThead.limitPassword.checked"
                          ></el-table-column>

                          <el-table-column
                            :label="formThead.platformBalance.label"
                            :prop="formThead.platformBalance.prop"
                            v-if="formThead.platformBalance.checked"
                          >
                            <template slot-scope="scope">{{scope.row.platformBalance | amountyuan}}</template>
                          </el-table-column>
                          <el-table-column
                            :label="formThead.advanceBalance.label"
                            :prop="formThead.advanceBalance.prop"
                            v-if="formThead.advanceBalance.checked"
                          >
                            <template slot-scope="scope">{{scope.row.advanceBalance | amountyuan}}</template>
                          </el-table-column>
                        </el-table>
                        <div class="page">
                          <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChangepage"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="recordCount"
                            :pager-count="5"
                          ></el-pagination>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="12" :offset="1">
                  <div class="lefttableone">
                    <el-row :gutter="20">
                      <el-col :span="24" class="lefttableonecol">
                        <div class="tabletitle">账号信息</div>
                        <div>
                          <el-button
                            type="primary"
                            @click="addUser()"
                            size="mini"
                            style="float:right;margin:-30px 0px 10px"
                            v-if="isauth('user_binding_edit')"
                          >添加账号</el-button>
                        </div>
                        <el-table
                          :data="userList"
                          border
                          row-key="id"
                          :header-cell-style="headFirst"
                          height="50vh"
                        >
                          <el-table-column label="姓名" prop="userName"></el-table-column>
                          <el-table-column label="登录名" prop="loginName" min-width="110px"></el-table-column>
                          <el-table-column label="电话号码" prop="phoneNumber" min-width="110px"></el-table-column>
                          <el-table-column
                            label="操作"
                            aling="center"
                            width="60px"
                            v-if="isauth('user_binding_edit')"
                          >
                            <template slot-scope="scope">
                              <div>
                                <el-button
                                  type="text"
                                  size="mini"
                                  style="color:red"
                                  @click="delUser(scope.row)"
                                >删除</el-button>
                              </div>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </template>
      </dragdrop>
    </div>
    <!-- 绑定家长弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="subscribe"
      width="30%"
      center
      :close-on-click-modal="false"
      :before-close="closeDialog"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="电话号码" prop="phoneNumber">
          <el-input
            v-model="ruleForm.phoneNumber"
            size="mini"
            style="width:100%"
            oninput="value=value.replace(/[^\d]/g,'')"
            placeholder="请输入电话号码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="subscribeAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import { JSEncrypt } from 'jsencrypt'
import qs from 'qs'
let checkPhone = (rule, value, callback) => {
  if (!value) {
    // 通过callback传递错误信息
    callback()
  } else {
    let emailReg = /^1[3456789]\d{9}$/
    if (!emailReg.test(value)) {
      callback(new Error('请输入正确的手机号码格式！'))
    } else {
      // 没有错误了就直接调用callback
      callback()
    }
  }
}
export default {
  data() {
    return {
      // 学校id
      changeschoolid: '',
      // 用户id
      administrator: '',
      // 分页数据
      pageSize: 10,
      pageNum: 1,
      currentPage: 1,
      recordCount: 0,
      // 请求参数
      sortName: '',
      defaultExpandAll: true,
      //  部门id
      departmentGuid: '',
      // 用户名
      userName: '',
      // 用户编号
      userNumber: '',
      // 卡号
      cardNumber: '',
      limitUpload: 1,
      defaultProps: {
        children: 'children',
        label: 'departmentName'
      },
      // 学生数据
      formThead: {
        userName: {
          label: '姓名',
          prop: 'userName',
          checked: true
        },
        userNumber: {
          label: '人员编号',
          prop: 'userNumber',
          checked: false
        },
        cardNumber: {
          label: '卡号',
          prop: 'cardNumber',
          checked: true
        },
        departmentName: {
          label: '部门',
          prop: 'departmentName',
          checked: true
        },
        groupName: {
          label: '身份/分组',
          prop: 'groupName',
          checked: false
        },
        roomName: {
          label: '入住房间',
          prop: 'roomName',
          checked: false
        },
        userSexStr: {
          label: '性别',
          prop: 'userSexStr',
          checked: false
        },
        birthday: {
          label: '出生日期',
          prop: 'birthday',
          checked: false
        },
        idCard: {
          label: '身份证号',
          prop: 'idCard',
          checked: false
        },
        phoneNumber: {
          label: '手机号',
          prop: 'phoneNumber',
          checked: false
        },
        contact: {
          label: '联系人',
          prop: 'contact',
          checked: false
        },
        contactPhone: {
          label: '联系电话',
          prop: 'contactPhone',
          checked: false
        },
        homeAddress: {
          label: '家庭地址',
          prop: 'homeAddress',
          checked: false
        },
        postCode: {
          label: '邮政编码',
          prop: 'postCode',
          checked: false
        },
        email: {
          label: 'E_mail',
          prop: 'email',
          checked: false
        },
        regTime: {
          label: '注册时间',
          prop: 'regTime',
          checked: false
        },
        limitPassword: {
          label: '超额密码',
          prop: 'limitPassword',
          checked: false
        },
        platformBalance: {
          label: '平台钱包余额',
          prop: 'platformBalance',
          checked: false
        },
        advanceBalance: {
          label: '预存款金额(元)',
          prop: 'advanceBalance',
          checked: false
        },
        loginName: {
          label: '登陆名',
          prop: 'loginName',
          checked: false
        }
      },
      tableData: [],
      // 部门数据
      deptTree: [],
      idArr: [null],
      departmentName: [],
      roomName: [],
      dataTree: [],
      // 账户数据
      userList: [],
      // 账号绑定弹窗数据
      title: '添加账户',
      subscribe: false,
      ruleForm: {
        phoneNumber: ''
      },
      rules: {
        phoneNumber: [
          {
            required: true,
            message: '请输入电话号码',
            trigger: 'blur'
          },
          {
            validator: checkPhone,
            trigger: 'blur'
          }
        ]
      },
      // 当前选中学生
      userChcek: ''
    }
  },
  created() {
    this.changeschoolid = this.$store.state.user.changeschoolid
    this.administrator = sessionStorage.getItem('administrator')
  },
  mounted() {
    this.getDeptTree()
    this.getDataTree()
  },
  methods: {
    // 添加账户按钮
    addUser() {
      if (this.userChcek == '') {
        this.$message({
          message: '请选择要绑定的学生',
          type: 'warning'
        })
        return false
      }
      this.subscribe = true
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields()
      })
    },
    // 取消账户绑定
    closeDialog() {
      this.subscribe = false
    },
    // 确定账户绑定
    subscribeAdd() {
      this.$http({
        url: this.$http.adornUrl('/api/v1/family-login-bind-user'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            phoneNumber: this.ruleForm.phoneNumber,
            unitGuid: this.changeschoolid,
            userGuidList: [this.userChcek.userGuid]
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.subscribe = false
          // 查询账户列表
          this.getUser()
        } else {
          this.$message.error(data.errorMessage)
          return
        }
      })
    },
    // 点击选择学生
    rowClick(row) {
      this.userChcek = row
      // 查询账户列表
      this.getUser()
    },
    // 查询账户列表
    getUser() {
      this.$http({
        url: this.$http.adornUrl('/api/v1/family-login-user-search'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userChcek.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.userList = data.messageContent
        } else {
          this.$message.error(data.errorMessage)
          return
        }
      })
    },
    // 移除绑定账户
    delUser(row) {
      if (this.userChcek == '') {
        this.$message({
          message: '请选择要绑定的学生',
          type: 'warning'
        })
        return false
      }
      this.$confirm('是否解绑账户，删除将无法找回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/api/v1/family-login-unbind-user'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                unitGuid: this.changeschoolid,
                userGuid: this.userChcek.userGuid,
                loginGuid: row.loginGuid
              },
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.$message({
                message: '移除成功',
                type: 'success'
              })
              // 查询账户列表
              this.getUser()
            } else {
              this.$message.error(data.errorMessage)
              return
            }
          })
        })
        .catch(() => {})
    },
    //多选框修改事件
    checkboxChanged() {
      //保存用户自定义列
      localStorage.setItem('customUser', JSON.stringify(this.formThead))
    },
    //递归增加各节点name，并且删除type为'room'的children
    recursiveRoom(dataTree) {
      for (var i in dataTree) {
        dataTree[i].value = dataTree[i].name
        if (dataTree[i].type == 'room') {
          delete dataTree[i].children
        }
        if (dataTree[i].children) {
          this.recursiveRoom(dataTree[i].children)
        }
      }
    },
    //获取区域楼栋房间树信息
    getDataTree() {
      this.$http({
        url: this.$http.adornUrl('/area/room/get-area-room-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.administrator
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode === 200) {
          this.dataTree = data.messageContent
          this.recursiveRoom(this.dataTree)
          // console.log(JSON.stringify(this.dataTree));
        }
      })
    },
    // 条件查询用户信息
    gotosearch() {
      this.initpage()
    },
    //重置查询条件
    resetfilter() {
      this.userName = ''
      this.userNumber = ''
      this.cardNumber = ''
    },
    // 部门树节点点击
    handleNodeClick(data) {
      this.departmentGuid = data.departmentGuid
      this.departmentName = data.departmentName
      this.pageNum = 1
      this.initpage()
    },
    // 部门树
    getDeptTree() {
      this.$http({
        url: this.$http.adornUrl('/department/select-department-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
          messageType: 0
        })
      }).then(({ data }) => {
        // console.log(data.messageContent);
        if (data.messageCode == 200) {
          this.deptTree = data.messageContent
          this.recursiveget(this.deptTree)
          // this.idArr = []
          // this.getId(this.deptTree)
          // console.log(JSON.stringify(this.deptTree));
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //递归添加
    recursiveget(deptTree) {
      for (var i in deptTree) {
        deptTree[i].value = deptTree[i].departmentGuid
        deptTree[i].label = deptTree[i].departmentName
        if (deptTree[i].children.length == 0) {
          delete deptTree[i].children
        } else {
          this.recursiveget(deptTree[i].children)
        }
      }
    },
    //获取递归id
    getId(deptTree) {
      deptTree.forEach(ele => {
        if (ele.flag == true) {
          this.idArr.push(ele.id)
          if (ele.children && ele.children.length > 0) {
            this.getId(ele.children)
          }
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.initpage()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.initpage()
    },
    // 初始化人事资料页面
    initpage() {
      this.$http({
        url: this.$http.adornUrl('/api/v1/Student/user-department-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: {
              departmentGuid: this.departmentGuid,
              unitGuid: this.changeschoolid,
              cardNumber: this.cardNumber,
              userName: this.userName,
              userNumber: this.userNumber
            },
            sortName: this.sortName
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.tableData = data.messageContent.data
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          this.tableData.forEach(item => {
            if (item.userSex === 0) {
              this.$set(item, 'userSexStr', '男')
            } else {
              this.$set(item, 'userSexStr', '女')
            }
          })
          // console.log(this.tableData);
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  /deep/.el-dialog--center .el-dialog__body {
    padding: 20px 0;
    margin: 0 20%;
  }

  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }

  height: 86vh;

  .all_main {
    height: 100%;

    .header_title {
      padding: 20px 0;
      font-weight: bolder;
      text-align: left;
      border-bottom: 1px solid #e5e9f2;
      color: #909399;
    }

    .all_left {
      height: 100%;

      .bg-purple {
        height: 100%;
        // overflow-x: scroll;
        // white-space: nowrap;
        padding: 0 10px;

        .header_title {
          padding: 20px 0;
          font-weight: bolder;
          text-align: center;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
          overflow: hidden;
        }

        .department_tree {
          // width: 250px;
          height: calc(100vh - 190px);
          overflow-y: auto;

          &::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
          }

          padding-top: 20px;
          font-weight: bolder;

          .custom-tree-node {
            padding-left: 10px;
            font-size: 15px;

            .colorfont {
              color: DeepSkyBlue;
            }
          }
        }
      }
    }

    .all_right {
      /deep/.el-button + .el-button {
        margin: 0 6px;
      }

      .el-table__body-wrapper .is-scrolling-left {
        height: 500px;
      }

      height: 100%;
      overflow: auto;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }

      .bg-purple {
        height: 100%;

        .header_title {
          padding: 20px 0;
          font-weight: bolder;
          text-align: center;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
        }

        .el-table th {
          height: 100%;
          display: table-cell !important;
        }

        .table {
          .page {
            display: flex;
            justify-content: center;
            align-items: center;
          }

          padding: 10px 10px;

          .lefttableone,
          .lefttabletwo {
            // margin-bottom: 20px;
            .lefttableonecol {
              padding: 10px 0;
              border: 2px solid #e5e9f2;
            }

            .tabletitle {
              font-size: 16px;
              font-weight: 600;
              margin-bottom: 10px;
              color: #909399;
            }
          }

          .lincenter {
            text-align: center;
            height: 100%;
          }

          .righttableone {
            .tabletitle {
              font-size: 16px;
              font-weight: 600;
              margin-bottom: 10px;
              color: #909399;
            }
          }

          .lincenterleft,
          .lincenterright {
            margin-top: 50px;
          }
        }

        .header_select {
          height: 80px;
          // background-color: #F5F5F5;
          width: 98%;

          display: flex;
          align-items: center;

          .cardnumber,
          .username,
          .usernumber {
            display: flex;
            align-items: center;
            padding-left: 10px;
            width: 200px;

            div:nth-child(1) {
              width: 40px;
            }
          }

          .searchbutton {
            // height:36px;
            padding-left: 10px;
            display: flex;
            flex: 1;

            .addstudent {
              padding-right: 20px;
            }

            .el-checkbox {
              // align-self: left;
              width: 150px;
              margin-top: 20px;
            }
          }

          .bulk_import {
            padding-left: 20px;

            .upload-demo {
              display: flex;
              align-items: center;

              /deep/.el-upload-list__item-name {
                margin-right: 22px;
              }
            }
          }

          .packge_batch {
            padding-left: 20px;
          }
        }
      }
    }
  }
}

.grid-content.bg-purple.aa {
  margin-left: -85px !important;
}
</style>
